<template>
  <div id="courseCover">
    <div class="course-wrap">
      <el-card class="box-card">
        <div class="course--wrap-item clearfix" v-if="courseData">
          <div class="fl l-img">
            <img :src="coverImg(courseData)" class="fl" />
          </div>
          <div class="fl r-txt">
            <p class="title one-ellipsis">
              {{ courseData.title }}
            </p>
            <div class="txt-info">
              <p class="txt-row sheng">
                <b class="row-name">建设单位：</b>
                <span class="col">{{ getNames(courseData) }}</span>
              </p>
              <p class="txt-row sheng">
                <b class="row-name">建设团队：</b>
                <span class="col">{{ teamInfo(courseData) }}</span>
              </p>
              <p class="txt-row clearfix introduce">
                <b class="row-name">简<i style="opacity: 0">简介</i>介：</b>
                <span
                  class="col two-ellipsis"
                  v-if="courseData.content"
                  v-newhtmlnoimg="courseData.content"
                >
                </span>
                <span v-else class="row-cont col">暂无数据</span>
              </p>
              <p v-if="courseData.content" class="btn-detail">
                <span class="el-icon-zoom-in"></span>
                <span class="look-detail" @click="handleDetail()">
                  详情...
                </span>
              </p>
              <p class="txt-row sheng" v-if="courseData.courseType == 1">
                <b class="row-name">思政设计：</b>
                <el-button size="mini" plain @click="handleDownload"
                  >下载</el-button
                >
              </p>
            </div>
            <div class="txt-score">
              <Score v-if="courseId" :resId="courseId" :resType="1" />
              <div class="clearfix txt-ico">
                <LookDown txtShow :count="courseData.evaluateVO" size="5" />
                <div
                  class="apply-build"
                  v-if="!buildFlag && courseData.courseType == 1"
                >
                  <el-button
                    type="custom"
                    size="mini"
                    plain
                    :disabled="isApply"
                    @click="applyBuild()"
                    >{{ isApply ? '共建审核中' : '申请共建' }}</el-button
                  >
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-card>
    </div>
    <AppleBuild />
    <ViewDetail />
    <DownloadZip />
  </div>
</template>
<script>
import { openApiSysCourseQuery } from '@/api/openApi'
import { sysCourseTeamQuery } from '@/api/admin/courseLibrary/sysCourseTeam.js'
import setInfo from '@/mixins/setInfo.js'
import Bus from '@/utils/bus.js'
export default {
  mixins: [setInfo],
  components: {
    LookDown: () => import('@/components/home/lookDown.vue'),
    AppleBuild: () => import('./AppleBuild.vue'),
    Score: () => import('@/components/home/score.vue'),
    DownloadZip: () => import('@/components/download/DownloadZip.vue'),
  },
  data() {
    return {
      courseId: '',
      courseData: null,
      userId: this.$store.getters.userId,
      buildFlag: false,
      isApply: false, //true：已申请，false: 未申请
      listQuery: {
        page: 1,
        limit: 99,
        courseId: '',
      },
    }
  },
  watch: {
    $route(v) {
      this.courseId = this.$store.getters.courseId
      this.getInfo()
    },
  },
  mounted() {
    this.courseId = this.$store.getters.courseId
    this.getInfo()
  },
  methods: {
    getInfo() {
      if (!this.courseId) return
      openApiSysCourseQuery({ id: this.courseId }).then((res) => {
        this.courseData = res.data.data[0]
        let courseTeamList = this.courseData.sysCourseTeamList
        //判断是否是团队成员
        if (!this.userId) return
        this.buildFlag =
          courseTeamList.map((v) => v.userId).indexOf(this.userId) > -1
        if (!this.buildFlag) {
          //如果不是团队成员，查询是否已经申请
          this.isApply = false
          this.getList()
        }
      })
    },
    //申请共建
    applyBuild() {
      Bus.$emit('showDialogCourseBuild', this.courseData)
    },
    handleDetail() {
      Bus.$emit('showDialogViewDetail', this.courseData, '简介')
    },
    //查询团队
    getList() {
      this.isApply = false
      this.listQuery.courseId = this.courseData.id
      sysCourseTeamQuery(this.listQuery).then((res) => {
        let teamData = res.data.data
        let teamArr = teamData.map((v) => v.userId)
        this.isApply = teamArr.indexOf(this.userId) > -1
      })
    },
    //下载思政设计
    handleDownload() {
      //判断是否登录
      if (!this.$store.getters.userId) {
        this.loginTip()
        return
      }
      let { sysCourseFiles } = this.courseData
      let fileList = sysCourseFiles
        .filter((v) => v.type == 21)
        .map((v) => v.sysAttachment)
      if (fileList.length == 0) {
        this.warnMsg('作者没有上传资料')
        return
      }
      this.$bus.$emit('downloadZip', fileList)
    },
  },
}
</script>

<style  lang="scss" >
#courseCover {
  background: #fff;
  width: 100%;
  .course-wrap {
    width: 1400px;
    margin: 0 auto;
    padding-top: 30px;
    margin-top: 0px;
    margin-bottom: 30px;
    .el-card__body {
      padding: 0px;
    }
    .course--wrap-item {
      // height: 370px;
      .l-img {
        position: relative;
        width: 38%;
        height: 0;
        padding-bottom: 27%;
        border-right: 1px solid #eee;
        img {
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          display: inherit;
        }
      }
      .r-txt {
        position: relative;
        background: #fff;
        width: 795px;
        height: 300px;
        padding: 0 30px;
        .apply-build {
          position: absolute;
          right: 0;
          bottom: 0;
        }
        .title {
          border-bottom: 1px solid #d8d5d5;
          line-height: 74px;
          color: #ac100f;
          font-size: 22px;
          font-weight: 900;
        }
        .col {
          color: #666;
        }
        .txt-info {
          margin-top: 15px;
          .btn-detail {
            text-align: right;
            margin-top: 10px;
          }
          .txt-row {
            position: relative;
            width: 100%;
            line-height: 38px;
            font-size: 16px;
            padding-left: 1em;
            box-sizing: border-box;
            text-align: justify;
            max-height: 38px;
            overflow: hidden;
            .row-name {
              color: #000;
              font-weight: bold;
            }
            &::before {
              content: '';
              position: absolute;
              left: 0;
              top: 16px;
              width: 8px;
              height: 8px;
              border-radius: 50%;
              background-color: var(--colorH1);
            }
            .row-cont {
              width: 80%;
            }
            .three-ellipsis {
              position: relative;
              height: 114px;
              line-height: 38px;
              p,
              span {
                font-size: 16px !important;
                line-height: 38px !important;
              }
            }
          }
          .introduce {
            .row-name {
              position: absolute;
              left: 1em;
              top: 0;
            }
            .col {
              padding-left: 78px;
            }
          }
          .icon {
            color: var(--colorH1);
            font-size: 18px;
            margin-right: 5px;
          }
          .el-icon-zoom-in {
            font-size: 16px;
            font-weight: bold;
            color: #ac100f;
          }
          .look-detail {
            color: #aaa;
            font-size: 16px;
            line-height: 24px;
            cursor: pointer;
            &:hover {
              color: var(--colorH1);
              border-bottom-color: var(--colorH1);
            }
          }
        }
        .txt-score {
          p {
            .start {
              margin-right: 20px;
            }
          }
          .txt-ico {
            position: relative;
            margin-top: 10px;
            .icon-share {
              height: 24px;
              line-height: 24px;
              display: inline-block;
              span {
                i {
                  color: #8c8c8c;
                  font-size: 16px;
                  font-weight: bold;
                }
              }
            }
          }
        }
      }
    }
  }
}
@media screen and (max-width: 1400px) {
  #courseCover .course-wrap {
    width: 96%;
    padding: 0 2%;
    padding-top: 30px;
  }
  #courseCover .course-wrap .course--wrap-item .r-txt {
    width: 50%;
  }
  .introduce {
    display: none;
  }
}
</style>